<template>
  <q-input
    lined
    :model-value="modelValue"
    label="选择姿态"
    @update:model-value="input"
  >
    <template v-slot:append>
      <q-btn
        icon="precision_manufacturing"
        color="primary"
        padding="sm"
        @click="show"
      />
    </template>
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section
          class="row items-center q-gutter-x-sm no-wrap overflow-auto"
          style="min-width: 20rem"
        >
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">
              选择姿态
            </div>
            <q-space />
          </template>
          <q-select
            v-model="param.type"
            :options="postureType"
            label="姿态类型"
            map-options
            emit-value
            clearable
            behavior="menu"
            outlined
            dense
            style="min-width: 8rem"
            @popup-hide="getPostureList"
            @clear="getPostureList"
          />
          <q-select
            v-model="param.group"
            :options="groups"
            label="姿态分组"
            clearable
            behavior="menu"
            outlined
            dense
            style="min-width: 8rem"
            @popup-hide="getPostureList"
            @clear="getPostureList"
            option-label="name"
          />
          <q-btn
            label="清空"
            icon="clear"
            color="primary"
            @click="input('')"
            v-close-popup
          />
        </q-card-section>
        <q-separator />
        <q-slide-transition>
          <div v-if="postureList.length !== 0">
            <q-card-section
              style="
                max-height: calc(100vh - 10rem);
                min-height: 10rem;
                min-width: 15rem;
                overflow: auto;
              "
              class="row items-center justify-center"
            >
              <q-card
                v-for="posture in postureList"
                v-bind:key="posture.id"
                class="q-ma-sm"
                @click="select(posture)"
                style="min-width: 15rem"
              >
                <q-card-section class="row items-center">
                  <div
                    class="text-h6 text-bold text-black no-wrap overflow-hidden"
                    style="width: calc(100% - 4rem); height: 2rem"
                  >
                    {{ posture.name }}
                  </div>
                </q-card-section>
                <q-separator />
                <q-list>
                  <q-item
                    dense
                    v-for="item in items"
                    v-bind:key="item.key"
                    clickable
                    v-ripple
                  >
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{
                      posture[item.key]
                    }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { onMounted, ref } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api/index.js";

const items = [
  { title: "分组", key: "group" },
  { title: "类型", key: "type" },
];

const postureType = [
  { label: "端点", value: "endpoint" },
  { label: "经停点", value: "stopover" },
  { label: "校准点", value: "calibration" },
];

export default {
  name: "PostureSelector",
  props: {
    modelValue: String,
  },
  setup(props, context) {
    const visible = ref(false);

    const posture = ref({});
    const postureUrl = useAPIStore().postureUrl;
    const postureList = ref([]);
    const groups = ref([]);
    const param = ref({
      type: null,
      group: null,
    });
    function getPosture() {
      if (props.modelValue !== "") {
        api.get(postureUrl + "posture/id/" + props.modelValue).then((rs) => {
          posture.value = rs.data;
        });
      }
    }
    function getPostureList() {
      api.get(postureUrl + "posture", { params: param.value }).then((rs) => {
        postureList.value = rs.data;
      });
      api.get(postureUrl + "posture/groups").then((rs) => {
        groups.value = rs.data;
      });
    }
    onMounted(() => {
      getPosture();
      getPostureList();
    });

    return {
      param,
      groups,
      postureList,
      items,
      postureType,
      posture,
      visible,
      show() {
        getPosture();
        visible.value = true;
      },
      getPostureList,
      select(data) {
        posture.value = data;
        context.emit("update:modelValue", posture.value.id);
        visible.value = false;
      },
      input(data) {
        context.emit("update:modelValue", data);
      },
    };
  },
};
</script>
